<template>
    <a-button type="text" class="gift-select-btn" @click="openGoodsModal" ghost>
        {{state.goodsList.length?`已设置${state.goodsList.length}件`:'设置赠品'}}
    </a-button>
    <GoodsModal v-if="state.goodsModalVisible" :goodsList="state.goodsList" @ok="handleOk" @cancel="handleCancel"></GoodsModal>
</template>
<script lang="ts" setup>
import { reactive,onMounted } from "vue";
import {GoodsModal} from "@/components/index"
import { GoodsTypes, objTypeEnum } from "@/type";


const props = withDefaults(
        defineProps<{
        value:GoodsTypes.GoodsType[] | undefined
    }>(),
    {
        value:()=>[]
    }
)

const emit = defineEmits<{
    (e:"update:value",values:GoodsTypes.GoodsType[]):void
}>()

const state = reactive<{
    goodsModalVisible: boolean,
    goodsList:GoodsTypes.GoodsType[]
}>({
    goodsModalVisible: false,
    goodsList:[]
})

onMounted(()=>{
    state.goodsList = [...props.value];
})

const openGoodsModal = ()=>{
    state.goodsModalVisible = true;
}

const handleOk = (values:any)=>{
    state.goodsList.push(...values);
    state.goodsModalVisible = false;
    emit("update:value",state.goodsList.map(goods=>{
        goods.type = objTypeEnum.Gift
        return goods;
    }));
}

const handleCancel = ()=>{
    state.goodsModalVisible = false;
}

</script>
<style lang="less" scoped>
.gift-select-btn{

}
</style>